<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>面积测量</title>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" include="bootstrap,jquery" src="../js/include-web.js"></script>
<script type="text/javascript" include="draw" src="../../dist/include-mapboxgl.js"></script>
<script type="text/javascript">
    mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
    var alertDiv,
        host = window.isLocal ? document.location.protocol + "//" + document.location.host : "http://support.supermap.com.cn:8090";
    var url = host + "/iserver/services/map-world/rest/maps/World";
    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
        "| Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> " + " with <span>© <a href='http://iclient.supermapol.com' target='_blank'>SuperMap iClient</a></span>";
    var map = new mapboxgl.Map({
        container: 'map',
        style: {
            "version": 8,
            "sources": {
                "raster-tiles": {
                    "attribution": attribution,
                    "type": "raster",
                    "tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}'],
                    "tileSize": 256,
                },
            },
            "layers": [{
                "id": "simple-tiles",
                "type": "raster",
                "source": "raster-tiles",
                "minzoom": 0,
                "maxzoom": 22
            }],
            "sprite": "http://iclient.supermapol.com/web/styles/street/sprite",
        },
        center: [0, 0],
        maxZoom: 18,
        zoom: 3
    });
    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
    map.addControl(new mapboxgl.NavigationControl(), 'top-left');

    var draw = new MapboxDraw({
        displayControlsDefault: false,
        controls: {
            polygon: true,
            trash: true
        }
    });
    map.addControl(draw, "top-left");

    function measureArea(e) {
        if (!e.features) {
            alert("没有获取到数据,请重新绘制");
            return;
        }
        var param = new SuperMap.MeasureParameters(e.features[0]);
        new mapboxgl.supermap.MeasureService(url).measureArea(param, function (serviceResult) {
            var area = serviceResult.result.area;
            var rounded_area = Math.round(area * 100) / 100;
            showAlert(rounded_area + "平方米");
        });
    }

    function removeMsg() {
        $('#msg_container').remove();
    }

    map.on('draw.create', measureArea);
    map.on('draw.delete', removeMsg);

    function showAlert(msg) {
        var className = "alert-success";
        if (alertDiv) {
            $(alertDiv).remove();
        }
        if (!$('#msg_container')[0]) {
            alertDiv = $("<div class='alert alert-dismissible' id='msg_container' role='alert' " +
                "style='z-index:800;position: absolute;top: 20px;left: 40%;width:250px;display: none'>" +
                "<button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button>" +
                "<strong><p id='msg' style='word-wrap: break-word'></p></strong></div>");
            $('body').append(alertDiv)
        }
        $('#msg_container').addClass(className);
        $('#msg_container').slideDown(300);
        $('#msg').html(msg);
    }
</script>
</body>
</html>